<template>
  <div id="companyNews">
    <ul>
        <span>{{$t('brand.companyNews')}}</span>
        <button @click="goToTheNewsList">
          MORE+
        </button>
    </ul>
    <div class="storyGroup">
      <the-news v-for="(list,index) in newsList" :key="index" :imgWidth="imgWidth" :theNews="list"/>
    </div>
  </div>
</template>

<script>
  import theNews from '@/components/mobile/brand/theNews'
    export default {
        name: "companyNews",
      props:{
        newsList:{}
      },
      data(){
          return {
            imgWidth:0,
          }
      },
      computed:{
        lang:{
          get(){
            let storageData = window.sessionStorage.getItem('lang');
            if(this.$store.state.lang!==storageData&&storageData!=='null'){
              this.$store.dispatch('toChangeLang', storageData);    //同步操作
            }
            return this.$store.getters.getLang;
          },
          set(){}
        },
      },
      methods:{
        goToTheNewsList: function () {
          this.$router.push('/theNewsList');
          this.$store.dispatch('toChangeNowPage','/theNewsList');
          this.$store.dispatch('toChangeAboutUsOrOurProductsId', '/theNewsList');
          let pageName='新闻';
          if(this.lang==='en'){
            pageName='news';
          }
          this.$store.dispatch('toChangeCurrentPageText',pageName);
        },
        getScreen:function(){
          this.imgWidth=(document.body.clientWidth)/2;
        },
      },
      components:{
        theNews:theNews,
      },
      mounted(){
        this.getScreen();
      }
    }
</script>

<style scoped>
  #companyNews{
    width: 100%;
  }
  #companyNews ul{
    position: relative;
    height:35px;
    line-height:35px;
  }
  #companyNews ul span{
    display: inline-block;

  }
  #companyNews ul button{
    border:0;
    color:#999999;
    background: rgba(0,0,0,0);
    font-size:11px;
    right:15px;
    left:auto;
    position: absolute;
  }
  .storyGroup{
    display: flex;
    overflow-x: scroll;
    padding:0 10px 10px 10px;
    background: #f5f5f5;
  }
</style>
